London Class 9 - Karleen Richards - HTML/CSS Module Project - Week 1#505
London Class 9 - Karleen Richards - HTML/CSS Module Project - Week 1#505karleenmsrichards wants to merge 16 commits into
Conversation
HTML/CSS structure arranged
PeteLindsell
left a comment
PeteLindsell
left a comment
There was a problem hiding this comment.
This is looking really good!
I have made a few comments for possible improvements. Other than that some more info in the PR description would be useful but generally very good.
| color: rgb(158, 156, 156); | ||
| text-decoration: none; | ||
| padding: 15px; | ||
|
|
||
| } | ||
|
|
||
| ul li a:hover { | ||
| color: #CE5C08; |
There was a problem hiding this comment.
It is generally better to define colours consistently using HEX eg "#CE5C08" or rgb eg "rgb(158, 156, 156)"
| background-size: cover; | ||
| height: 500px; | ||
| font-size: 22px; | ||
| font-weight: 12; |
There was a problem hiding this comment.
font-weights are usually "lighter", "normal", "bold" or in 100s eg "100", "200" etc
| margin-bottom: 0; | ||
| font-size: 40px; | ||
| font-weight: 10; | ||
|
|
| width: 120px; | ||
| height: 50px; | ||
| font-size: 14px; | ||
| border-radius: 4%; |
There was a problem hiding this comment.
I would usually go for a fixed px value for boarder radius, setting it as % makes it relative to the height and width of the box
| } | ||
|
|
||
| hr { | ||
| color: rgb(217, 219, 224);; |
There was a problem hiding this comment.
You just want one ; here and on line 166
|
|
||
| <main> | ||
| <section class="section1"> | ||
| <p class="section1-phrase1">Introducing Karma</p> |
There was a problem hiding this comment.
A page should always have a h1 that describes the page uniquely in the site. This would be a good candidate.
| </section> | ||
|
|
||
| <section class="section2"> | ||
| <p class="section2-phrase1">Everyone needs a little Karma.</p> |
There was a problem hiding this comment.
This line looks like a title to this section so probably wants to be a h2
|
|
||
| <section class="section2"> | ||
| <p class="section2-phrase1">Everyone needs a little Karma.</p> | ||
| <section class="section2-imgs-text"> |
There was a problem hiding this comment.
Sections generally want titles so this is probably not suitable to be a section a list of items could be better eg
<ul>
<li> </li>
<li> </li>
</ul>
| </section> | ||
|
|
||
| </main> | ||
| <footer> |
| <p>Join us on</p> | ||
|
|
||
| <section> | ||
| <a href="#"><img class="footer-imgs" src="./img/twitter-icon.svg"></a> |
There was a problem hiding this comment.
These images should have an alt attribute eg "Twitter"
1. Used fixed font sizes, eg rem throughout 2. Used fixed colours through out eg hex only for this page 3. Added an h1 4. Changed some sections tags to <div> as they did not fit the description of a section.
Added new division with img and text and added the css to style the new block.
Styled input fields and button. Also added main image in HTML.
Customized Select tag Fixed padding between labels and input Changed the colour of the heading
1.Added customized checkbox tick and fixed margin between checkbox and label. Padding was also added to the tick when checked. 2.Adjusted size of radio buttons
1. Fixed gaps and padding between elements. 2. Changed CSS classes where appropriate.
Added a few media query parameters.
Adjusted CSS to for web page to fir screen size max width 576px.
Added media query at break point 576px for Hamburger menu and Nav list to replace original nav bar.
2 participants
Volunteers: Are you marking this coursework? You can find a guide on how to mark this coursework in
HOW_TO_MARK.mdin the root of this repositoryYour Details
Homework Details
Notes
What did you find easy?
What did you find hard?
What do you still not understand?
Any other notes?